<%@page import="org.springframework.security.core.context.SecurityContextHolder"%>
<%@page import="org.springframework.security.core.userdetails.User"%>
<%@ include file="/includes/taglibs.jsp" %>    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Le styles -->
	<link href="<c:url value="/styles/bootstrap.min.css"/>" rel="stylesheet" />
	<!--<link href="<c:url value="/styles/bootstrap-responsive.min.css"/>" rel="stylesheet" />-->
	<link href="<c:url value="/styles/custom-theme/jquery-ui-1.8.22.custom.css"/>" rel="stylesheet" type="text/css" />
	<style type="text/css">
		body {
			padding-top: 50px;
			padding-bottom: 40px;
		}
		.jstree li[rel="disabled-leaf"]{
			color: #ccc;
			text-decoration: line-through;
		}
	</style>

	<script src="<c:url value="/scripts/jquery-1.8.3.min.js"/>" type="text/javascript"></script>
	<script src="<c:url value="/scripts/jquery-ui-1.8.22.custom.min.js"/>" type="text/javascript" ></script>
	<script src="<c:url value="/scripts/jquery.livequery.min.js"/>" type="text/javascript" ></script>
	<script	src="<c:url value="/scripts/bootstrap.min.js"/>" type="text/javascript" ></script>
	<script	src="<c:url value="/scripts/jquery.dataTables.min.js"/>" type="text/javascript" ></script>
	<script	src="<c:url value="/scripts/jquery.dataTables.bootstrap.js"/>" type="text/javascript" ></script>
	<script	src="<c:url value="/scripts/custom-scripts.js"/>" type="text/javascript" ></script>
	<script	src="<c:url value="/scripts/jquery.validate.js"/>" type="text/javascript" ></script>
	
	<script src="<c:url value="/scripts/jquery.jstree.js"/>" type="text/javascript"></script>
	<script src="<c:url value="/scripts/jquery.hotkeys.js"/>" type="text/javascript"></script>
	<script src="<c:url value="/scripts/jquery.cookie.js"/>" type="text/javascript"></script>
		
	
	<script type="text/javascript">
		
		$(document).ready(function(){
	
			$("#checkAll").click(function()
			 {
			  var checked_status = this.checked;
			  $("input[name='removeId']").each(function()
			  {
			   this.checked = checked_status;
			  });
			 });
			
			$('#mainMenuTree').jstree({ 
				"json_data" : {
					"ajax" : {
						"url" : "<c:url value="/menuaccess/getmenu.json"/>",
						"data" : function (n) { 						
							return { 
								id : n.attr ? n.attr("id") : 0,
								checklogged: true
							}; 
						}
					}
				},
				"themes" : {
					"theme" : "default",
					"dots" : true,
					"icons" : true
				},
				types: {
				    "disabled": {
				        "select_node": false,
				        "open_node":   false,
				        "close_node":  false,
				        "create_node": false,
				        "delete_node": false
				    }
				},
				"plugins" : [ "themes", "json_data", "sort", "ui", "types" ]
			});
			
			 var ready = false; 
	        $("#mainMenuTree") 
	            .bind("reselect.jstree", function() { 
		            var selectedNode = $.cookie('mySelectedNode'); 
		            $("#mainMenuTree").jstree("select_node", selectedNode); 
		            	ready = true; 
		         }) 
		         .bind("before.jstree", function (e, data) {
			        $('ul li[rel="disabled"]').each(function() {
			          $(this).click(false);
			          $(this).dblclick(false);
					});
				})
	            .bind("select_node.jstree", function(event, data) { 
	                if (ready) { 
	                    var href = data.rslt.obj.context.href;
	                    //var path = window.location.href.toLowerCase(); 

	                    //console.dir(data.rslt.obj.context.href);
	                    //alert(data.inst.get_text(data.rslt.obj)); 

	                    var nodeId = data.rslt.obj.attr("id"); 
	                    //console.log(nodeId);
	                    $.cookie('mySelectedNode', "#" + nodeId); 

	                    //var loc = path.indexOf('mywebsite'); 
	                    //loc = loc + 10; // mywebsite/ char count 
	                    //var root = path.substring(0, loc); 
	                    //window.location.href = root + href; 
	                   window.location.href = href;
	                } 
	            }); 
		
		});
	</script>
	
	
	<script type="text/javascript">
	/*
	$.getJSON('<c:url value="/commons/menubyloggeduser"/>',function(data) {
		var items = [];
		$.each(data.menuAccessServingDtoList, function(){
			var childs='';
			items.push('<li class="dropdown"><a href="'+this.link+'" class="dropdown-toggle" data-toggle="dropdown">' + this.name + '<b class="caret"></b></a>');
			items.push('<ul class="dropdown-menu">');
			$.each(this.child, function(){
				
				childs = childs + '<li><a href=<c:url value="/'+this.link+'>'+this.name+'"/></a></li>';
			});
			childs = childs + '</ul>';
			items.push(childs);
		});
		items.push('</li>');
		  $('<ul/>', {
		    'class': 'nav',
		    html: items.join('')
		  }).appendTo('.nav-collapse');
		});
		*/
	
	</script>

</head>
<body>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      
      <a class="brand" href="#">Project Name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>

        </ul>        
        
        
        <ul class="nav pull-right">          
		  <li class="dropdown">
		    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-black"></i> Welcome, nobody <b class="caret"></b></a>
		    <ul class="dropdown-menu">
		      <li><a href="<c:url value="/j_spring_security_logout"/>"><i class="icon-off"></i> Logout</a></li>
		    </ul>
		  </li>
		  <%--
		  <li class="dropdown">
		    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-envelope"></i> <font color="red">*</font> <b class="caret"></b></a>
		    <ul class="dropdown-menu">
		      <li><a href="#">Item 1</a></li>
		      <li><a href="#">Item 2</a></li>
		      <li><a href="#">Item 3</a></li>
		    </ul>
		  </li>
		   --%>
		</ul>
		<%--
		<form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
         --%>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->  
</div><!-- /.navbar -->

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
          		<div class="well sidebar-nav">
          			<div id="mainMenuTree"></div>
          		</div><!--/.well -->
        	</div><!--/span3-->
        	<div class="span9">
        		<decorator:body></decorator:body>
        	</div><!--/span9-->
		</div>
			<footer>
				<p>&copy; Company 2013</p>
			</footer>

    </div><!--/.fluid-container-->	
</body>
</html>